<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('试卷管理')">
<body>
<link rel="stylesheet" type="text/css" th:href="@{/static/lib/selectpage/selectpage.css}"/>
<style type="text/css">
    @media screen and (max-width: 1100px) {
        .layui-layer-iframe {
            overflow-y: visible !important;
        }
    }

    .sp_result_area {
        width: 400px !important;
    }
</style>
<div id="content" class="col-lg-12 col-sm-12" style="padding: 5px;">
    <div class="row">
        <div class="box col-md-12" style="margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-education"></i>试卷列表
                    </h2>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search" role="form" method="post" action="/testPaper/page/list">
                        <div class="form-group" data-chosenWidth="true" style="margin-bottom: 5px;">
                            <select name="pageSize" class="form-control input-sm" id="pagesize">
                                <option value="10">10条/页</option>
                                <option value="25">25条/页</option>
                                <option value="50">50条/页</option>
                            </select>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="gradeId">
                                    <option value="0">-年级-</option>
                                    <option th:each="list:${listQGrade}" th:value="${list.id}" th:text="${list.cnName}" th:selected="${gradeId==list.id}"></option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="term">
                                    <option value="0">-学期-</option>
                                    <option value="1" th:selected="${term==1}">上学期</option>
                                    <option value="2" th:selected="${term==2}">下学期</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm" style="margin-right: 15px;">
                                <input class="form-control" type="text" style="height: 30px;min-height: 10px;"  placeholder="请选择关联教材" id="textbooksId" name="textbooksId" th:value="${textbooksId}">
                            </div>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="unitId">
                                    <option value="0">-单元-</option>
                                    <option th:each="list:${listQuestionTerm}" th:value="${list.id}" th:text="${list.cnName}" th:selected="${unitId==list.id}"></option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <select class="form-control" name="state">
                                    <option value="1" th:selected="${state==null || state!=0}">正式试卷</option>
                                    <option value="0" th:selected="${state==0}">其他试卷</option>
                                </select>
                            </div>
                            <div class="input-group input-group-sm">
                                <input type="search" name="search" id="search" th:value="${search}" class="form-control input-sm" placeholder="查询关键字..." style="width:200px;"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit"> 查 询 </button>
                                </span>
                            </div>
                            <a href="javascript:void(0);" onclick="addNewPaper()" role="button" class="btn btn-sm btn-info">生成新试卷</a>
                        </div>
                    </form>
                    <table class="table table-striped table-bordered table-hover" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">试卷ID</th>
                            <th class="text-center">试卷标题</th>
                            <th class="text-center">试卷类型</th>
                            <th class="text-center">试卷难度</th>
                            <th class="text-center">年级</th>
                            <th class="text-center">学期</th>
                            <th class="text-center">教材</th>
                            <th class="text-center">单元</th>
                            <th class="text-center">最后操作</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="paper,itemStat:${pageInfo.list}">
                            <td class="text-center" th:text="${itemStat.index+1}">1</td>
                            <td class="text-center" th:text="${paper.id}">试卷ID</td>
                            <td class="text-center" th:text="${paper.paperName}">试卷标题</td>
                            <td class="text-center" th:text="${paper.typeCnName}">试卷类型</td>
                            <td class="text-center" th:text="${paper.degreeCnName}">试卷难度</td>
                            <td class="text-center" th:text="${paper.gradeCnName}">年级</td>
                            <td class="text-center" th:text="${paper.term==1?'上学期':(paper.term==2?'下学期':'')}">学期</td>
                            <td class="text-center" th:text="${paper.textbooksNameString}">教材</td>
                            <td class="text-center" th:text="${paper.unitNameString}">单元</td>
                            <td class="text-center" th:text="${#dates.format(paper.recordTime, 'yyyy-MM-dd HH:mm:ss')}">最后操作</td>
                            <td style="text-align: center;">
                                <a href="javascript:void(0);"
                                   th:if="${session.menuMap[320] != null and session.menuMap[320] !=''}"
                                   th:alt="|${testServerUrl}testPaper/#/?rnd=${rnd}&from=CRM&tpid=${paper.id}&qid=0&sid=0&pid=0&tokenString=S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A|"
                                   onclick="preview(this);"
                                   class="btn btn-sm btn-info preview"
                                   role="button">
                                    <span class="glyphicon glyphicon-eye-open"></span> 预览
                                </a>
                                <a th:if="${session.menuMap[319] != null and session.menuMap[319] !=''}" th:alt="${paper.id}"
                                   th:onclick="'start('+${paper.id}+','+${state} +')'"
                                   href="javascript:void(0);"
                                   class="btn btn-sm btn-primary edit"
                                   role="button">
                                    <span class="glyphicon glyphicon-edit"></span>
                                    <span th:text="${state==0?'启用':'停止'}">启用</span>
                                </a>
                                <a th:if="${session.menuMap[316] != null and session.menuMap[316] !=''}" th:alt="${paper.id}" onclick="edit(this)" href="javascript:void(0);" class="btn btn-sm btn-danger edit" role="button"><span
                                        class="glyphicon glyphicon-edit"></span> 修改 </a>
                                <a th:if="${session.menuMap[317] != null and session.menuMap[317] !=''}" th:alt="${paper.id}" onclick="sortQues(this)" href="javascript:void(0);" class="btn btn-sm btn-info edit" role="button"><span
                                        class="glyphicon glyphicon-edit"></span> 题目排序 </a>
                                <a th:if="${session.menuMap[321] != null and session.menuMap[321] !='' and state==1}" th:onclick="'sendPaperConfirm('+${paper.id}+',this)'" href="javascript:void(0);" class="btn btn-sm btn-danger" role="button"><span class="glyphicon glyphicon-share"></span> 发送 </a>
                                <a th:if="${session.menuMap[318] != null and session.menuMap[318] !='' and state==1}" th:onclick="'sendPaperToLearnTextbookConfirm('+${paper.id}+',this)'" href="javascript:void(0);" class="btn btn-sm btn-danger"
                                   role="button">
                                    <span class="glyphicon glyphicon-share"></span>按教材发送
                                </a>
                                <!--
                                <a th:onclick="'deletePaper('+${paper.id}+',this)'" href="javascript:void(0);" class="btn btn-sm btn-danger" role="button"><span class="glyphicon glyphicon-floppy-remove"></span> 删除 </a>
                                -->
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
        <!--/box-->
    </div>
    <!--/row-->
</div>
<!-- content ends -->

<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script type="text/javascript" th:src="@{'/static/lib/selectpage/selectpage.js?v=201901250003'}"></script>
    <script type="text/javascript">
        var ADMIN_TOKEN_STRING = "S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A";
        var currentSendPaper;

        $(function () {
            //关联教材
            $('#textbooksId').selectPage({
                showField: 'name',
                keyField: 'id',
                data: '/questionKnowledge/showTextbooks',
                multiple: false,//单选
                pageSize: 5,
                eAjaxSuccess: function (data) {
                    // console.log("data:" + JSON.stringify(data));
                    return data;
                },
                eSelect: function (data) {
                }
            });
        });

        /**
         *试卷修改
         */
        function edit(obj) {
            var url = "/testPaper/page/edit/" + $(obj).attr("alt");
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['90%', '75%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        /**
         * 试卷排序
         */
        function sortQues(obj) {
            var url = "/testPaper/page/question/sort/" + $(obj).attr("alt");
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['90%', '75%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        /**
         * 试卷预览
         */
        function preview(obj) {
            var url = $(obj).attr("alt");
            console.log("url=" + url);
            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                // shade: [0],
                shade: 0.4,
                area: ['90%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                // anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        /**
         * 生成新试卷
         *
         */
        function addNewPaper() {
            // parent.tabListInit("add_new_paper", "生成试卷", "/testPaper/page/add");
            var url = "/testPaper/page/add";
            console.log("url=" + url);
            //iframe窗口
            layer.open({
                type: 2,
                title: '生成试卷',
                closeBtn: 1, //显示关闭按钮
                shade: 0.4,
                area: ['98%', '98%'],
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        /**
         * 发送试卷给学生
         * @param id 试卷ID
         * @param obj 点击的当前元素
         */
        function sendPaperConfirm(id, obj) {
            var url = "/testPaper/page/chooseStudent?testPaperId=" + id;
            var item = $(obj).parent().siblings().eq(7);
            currentSendPaper = $(item).html();

            //询问框
            // layer.confirm('您确认发送试卷《' + currentSendPaper + '》么？', {
            //     btn: ['确认', '取消'] //按钮
            // }, function () {
            //     layer.closeAll('dialog');
            //     $(obj).button('loading');
            // parent.tabListInit("send_paper_confirm", currentSendPaper, url);
            //     //恢复按钮状态
            //     $(obj).button('reset');
            // });

            //iframe窗口
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                // shade: [0],
                shade: 0.4,
                area: ['90%', '90%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                // anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () { //此处用于演示
                }
            });
        }

        /**
         *发送试卷给绑定该教材的学生
         */
        function sendPaperToLearnTextbookConfirm(id, obj) {
            var url = "/testPaper/sendPaperToLearnTextbook?testPaperId=" + id + "&tokenString=" + ADMIN_TOKEN_STRING;
            var item = $(obj).parent().siblings().eq(7);
            currentSendPaper = $(item).html();

            if (currentSendPaper == "") {
                layer.msg("该试卷未绑定任何教材，请绑定至少一个教材", {icon: 2});
                $(obj).button('reset');
                return;
            }

            //询问框
            layer.confirm('您确认发送试卷给正在学习教材《' + currentSendPaper + '》的学生么？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                layer.closeAll('dialog');
                $(obj).button('loading');

                // 发送试卷
                $.post(url, {}, function (res) {
                    if (res.status == 1) {
                        layer.msg('发送成功', {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                });
                //恢复按钮状态
                $(obj).button('reset');
            });
        }

        /**
         * 删除试卷
         * @param id 试卷ID
         * @param obj 点击的当前元素
         */
        function deletePaper(id, obj) {
            //询问框
            layer.confirm('您确认删除该试卷么，学生的相关做题记录也会全部删除？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                layer.closeAll('dialog');

                $.get("/testPaper/delete/" + id + "?tokenString=" + ADMIN_TOKEN_STRING, {}, function (res) {
                    doDeleteResult(res);
                }, 'json');

                function doDeleteResult(res) {
                    console.log(res);
                    if (res != null && res.status == 1) {
                        layer.msg('删除成功', {icon: 1});
                        window.location.reload();
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                }
            }, function () {
                // layer.msg('您放弃了操作', {
                //     time: 20000, //20s后自动关闭
                //     btn: ['明白了', '知道了']
                // });
            });
        }

        function start(paperId, state) {
            //询问框
            var cfmMsg = state == 1 ? '停止' : '启用';
            var toState = state == 1 ? 0 : 1;
            layer.confirm('您确认' + cfmMsg + '该试卷么？', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                layer.closeAll('dialog');

                $.post("/testPaper/changePaperAvailableState?tokenString=" + ADMIN_TOKEN_STRING, {
                    paperId: paperId,
                    state: toState
                }, function (res) {
                    console.log(res);
                    if (res != null && res.status == 1) {
                        layer.msg('操作成功', {icon: 1});
                        window.location.reload();
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                }, 'json');
            }, function () {
                // layer.msg('您放弃了操作', {
                //     time: 20000, //20s后自动关闭
                //     btn: ['明白了', '知道了']
                // });
            });
        }
    </script>
</div>
</body>
</html>